<template>
  <div class="comments-container">
    <div class="comments-con">
      <div class="comments-list clearfix" v-for="(item ,index) in list">
        <div class="user-info fl">
          <img :src="URL.PIC+item.memberProfile" class="uesr-atvar">
          <span class="user-name" v-if="item.memberName && item.memberName!= ''">{{item.memberName | nameFilter}}</span>
          <span class="user-name" v-else>{{item.userName | phoneFilter}}</span>
        </div>
        <div class="commens-inner fl">
          <div class="comments-score">
            <el-rate
              v-model="item.productScore"
              disabled
              :colors="['#255B8B', '#255B8B', '#255B8B']"
              text-color="#255B8B"
              score-template="{item.productScore  }">
            </el-rate>
          </div>
          <p class="comments-text">{{item.content}}</p>
          <div class="upload-pdImg">
            <div class="upload-list fl" v-for="(media,i) in item.media">
              <img v-if="media.type == 'image'" :src="URL.PIC+media.url">
            </div>
          </div>
          <p class="comments-date">{{item.createTime}}</p>
        </div>
      </div>
    </div>
    <!-- <Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size"
                @pagination="getComments"/> -->
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import {evaluationList} from '@/api/product'
export default {
  props: ['id'],
  name: 'Comments',
  components: {
    Pagination
  },
  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        productId: null,
        page: 1,
        size: 10
      }
    }
  },
  created() {
    this.listQuery.productId = this.id;
    this.getComments()
  },
  methods: {
    getComments(){
      evaluationList(this.listQuery).then(res=>{
        console.log(res.data.list)
        this.total = res.data.total;
        this.list=res.data.list;
        this.$emit("eventTotal", this.total);
      })
    }
  },
  filters: {
    phoneFilter(val) {
      let reg = /^(.{3}).*(.{4})$/
      return val.replace(reg, '$1****$2')
    },
    nameFilter(val) {
      let reg = /^(.{1}).*(.{1})$/
      return val.replace(reg, '$1****$2')
    }
  }
}
</script>

<style lang="scss" scoped>
.comments-con{
  .comments-list{
    padding: 15px 0;
    border-bottom: 1px solid #DCDCDC;
    .user-info{
      width: 130px;
      .uesr-atvar{
        width: 32px;
        height: 32px;
        background: #ccc;
        border-radius: 50%;
        vertical-align: middle;
      }
      .user-name{
        vertical-align: middle;
        display: inline-block;
        width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0 10px;
        color: #888;
        font-size: 12px;
      }
    }
    .commens-inner{
      width: 800px;
      .comments-score{

      }
      .comments-text{
        line-height: 24px;
      }
      .upload-pdImg{
        overflow: hidden;
        zoom: 1;
        .upload-list{
          margin: 0 20px 10px 0;
          img{
            width: 88px;
            height: 88px;
          }
        }
      }
      .comments-date{
        color: #888;
        margin: 0;
      }
    }
  }
  .comments-list:first-child{
    padding: 0 0 15px;
  }
}
</style>
